<template>
  <div class="s-table-container">
    <slot name="operator" />
    <div class="s-table-header">
      <el-table
        :data="tableData"
        style="width: 100%"
        :height="height"
        v-bind="componentProps"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          v-if="props.componentProps.rowKey"
        />
        <el-table-column
          v-bind="item.componentProps"
          :label="item.label"
          :width="item.width"
          v-for="item in props.columns"
          :key="item.field"
          :prop="item.field"
        >
          <template #default="scope" v-if="item.field === 'operations'">
            <div class="flex items-center justify-center w-full h-full">
              <slot name="operations" :scope="scope" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, onMounted, defineExpose } from "vue";
const props = defineProps({
  columns: {
    type: Array,
    required: true,
  },
  loadData: {
    type: Function,
    required: true,
  },
  componentProps: {
    type: Object,
    default: () => ({}),
  },
});

const height = ref(window.innerHeight - 350);

const init = async (params) => {
  const reslut = await props.loadData(params);
  console.log("reslut", reslut);
  tableData.value = reslut.data;
  total.value = reslut.total || 0;
};

onMounted(() => {
  init();
});
const currentPage4 = ref(1);
const size = ref("default");
const background = ref(false);
const disabled = ref(false);
const pageSize4 = ref(10);
const tableData = ref();
const total = ref();
const selectedRows = ref([]); // 存储选中的行数据

// 监听选中变化
const handleSelectionChange = (val) => {
  selectedRows.value = val;
};

const handleSizeChange = (value1) => {
  const params = {
    page: currentPage4.value,
    size: value1,
  };
  props.loadData(params);
};
const handleCurrentChange = (value2) => {
  const params = {
    page: value2,
    size: pageSize4.value,
  };
  props.loadData(params);
};

const refresh = (params) => {
  init(params);
};

defineExpose({
  refresh,
  selectedRows,
});
</script>
<style scoped lang="less">
.s-table-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;

  .s-table-header {
    flex: 1;
    overflow: auto;
    margin-top: 10px;
  }

  .s-table-pagination {
    position: relative;
    height: 50px;

    .el-pagination {
      position: absolute;
      top: 20px;
      right: 0;
    }
  }
}
</style>
